<template>
  <div class='home'>
    <div class="banner">
      <div class="banner-item" v-for="(item, index) in tagList" :key="index">
        <div class="banner-item-1" @click="changeTag(item)">
          <i :class="item.icon" :style="item.style"></i>
          <span>{{ item.span }}</span>
        </div>
        <div class="banner-item-2"></div>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <div class="money">
          <div class="symbol">￥</div>
          <div class="title">当前入帐总金额：<span>{{ money }}</span></div>
          <div class="footer"></div>
        </div>
      </div>
      <div class="middle"></div>
      <div class="right">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>入帐详情</span>
            <span style="font-size: 12px;">（最新的30条）</span>
          </div>
          <div class="table">
            <el-table :data="decList" stripe style="width: 100%" :show-header="show" height="250">
              <el-table-column type="index" width="40" align="center" label="序号">
            </el-table-column>
              <el-table-column prop="desStr" label="描述"  width="200">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
        <div class="ll"></div>
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>管理员列表</span>
          </div>
          <div class="table">
            <el-table :data="userList" stripe style="width: 100%" height="250">
            <el-table-column prop="username" label="用户名" width="120" align="center">
            </el-table-column>
            <el-table-column prop="loginAccount" label="登录账号" width="120" align="center">
            </el-table-column>
          </el-table>
          </div>
        </el-card>
      </div>
    </div>
    <div class="cart"></div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import request from '@/utils/request'

export default {
  name: 'HomeIndex',
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      show: false,
      tagList: [{ route: '/category', style: 'color: #85ccff', icon: 'el-icon-files', span: '分类' },
        { route: '/dish', style: 'color: #96de65', icon: 'el-icon-food', span: '菜品' },
        { route: '/setmeal', style: 'color: #ff7fbd', icon: 'el-icon-dish', span: '套餐' },
        { route: '/order', style: 'color: #bb8dee', icon: 'el-icon-document', span: '订单' }],
      OrderList: [],
      decList: [],
      userList: [],
      money: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    changeTag (tag) {
      let url = ''
      this.tagList.forEach(item => {
        if (tag.route === item.route) {
          url = item.route
        }
      })
      this.$router.replace(url)
    },
    getOrderList () {
      request({
        url: '/order-basic/order-list/1/30',
        method: 'get',
        params: {
          orderStatus: 0
        }
      }).then(res => {
        this.OrderList = res.data.data.data
        this.OrderList.forEach(item => {
          const des = {
            desStr: ''
          }
          des.desStr = '用户 ' + item.userBasicDto.username + ' 已付款 ' + item.totalMoney + '元'
          this.decList.push(des)
        })
        console.log(this.OrderList)
      })
    },
    searchUserByConditions () {
      // 执行查询操作
      request({
        url: '/user-basic/user-list/1/1000',
        method: 'get',
        params: {
          type: 3
        }
      }).then(result => {
        if (result.data.data.data != null) {
          this.userList = result.data.data.data
        } else {
          // 查询失败后弹出信息
          this.$message({
            message: '查询失败',
            type: 'error'
          })
        }
      }).catch(error => {
        this.$message({
          message: '查询失败',
          type: 'error'
        })
        console.log(error)
      })
    },
    searchMoney () {
      request({
        url: '/money-total/money-total'
      }).then(res => {
        this.money = res.data.data.money
        this.money = Number(this.money.toFixed(2))
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.getOrderList()
    this.searchUserByConditions()
    this.searchMoney()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 49%;
    height: 350px;
    border-radius: 10px;

    .table {
      width: 100%;
      height: 530px;
    }
  }
.home {
    background-color: #F5F5F5;

    .banner {
      display: flex;
      margin-top: 20px;
      background-color: #F5F5F5;
      width: 100%;
      height: 100px;
      border-radius: 10px;

      .banner-item {
        display: flex;
        background-color: #F5F5F5;
        width: 25%;
        height: 100px;
        border-radius: 10px;

        .banner-item-1 {
          background-color: #fff;
          width: 90%;
          height: 100px;
          border-radius: 10px;
          cursor: pointer;

          i, span {
            display: block;
            text-align: center;
          }

          i {
            margin-top: 20px;
            font-size: 35px;
          }

          span {
            margin-top: 8px;
            font-size: 14px;
            color: #464343;
          }
        }
        .banner-item-2 {
          background-color: #F5F5F5;
          width: 10%;
          height: 100px;
        }

        .banner-item-1:hover {
          box-shadow: #464343;
        }
      }
    }

    .content {
      display: flex;
      margin-top: 20px;
      background-color: #F5F5F5;
      width: 98%;
      height: 350px;
      border-radius: 10px;

      .left {
        width: 49%;
        height: 350px;
        background-color: #F5F5F5;

        .money {
          width: 100%;
          height: 350px;
          background-color: #fff;
          border-radius: 10px;
          font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;

          .symbol {
            width: 100%;
            height: 250px;
            line-height: 250px;
            text-align: center;
            font-size: 200px;
            font-weight: 1000;
            color: orangered;
          }

          .title {
            width: 100%;
            height: 50px;
            margin-top: 20px;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            margin-bottom: 30px;
            color: #464444;

            span {
              font-size: 50px;
              color: black;
              font-weight: 500;
            }
          }
        }
      }

      .middle {
        width: 2%;
        height: 350px;
        background-color: #F5F5F5;
      }

      .right {
        display: flex;
        width: 49%;
        height: 350px;
        background-color: #F5F5F5;

        .ll {
          width: 2%;
          height: 350px;
          background-color: #F5F5F5;
        }
      }
    }
  }
</style>
